
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-shadow属性</title>
    <style type="text/css">
        div
        {

            display:inline-block;
            width: 300px;
            height: 100px;
            padding:20px;
            border: 1px;
            border-image: url("boom.png") 1 repeat;
            -webkit-border-image: url("boom.png") 1 0 0 0  repeat;
            font-size:40px;
            font-family:Verdana;
            font-weight:bold;
            background-color:#CCC;
            color:#ddd;
            text-shadow:-1px 0 #333,/*向左阴影*/

            -1px 0 #555,
            0 -1px #444,
            0 -1px #777;
        }
        p{
            font-family: 宋体,serif;
            padding: 20px;
            background-color: #bcbcbc;
            font-size: 40px;
            font-weight: bold;
            color: #c7c7c7;
            word-wrap: break-word;
            text-shadow: 1px 0 1px #ddd,
        -1px 0  1px #fff,
        0 1px 1px #111,
            0 -1px 1px #fff;
        }

        /*镂空效果*/
        h1{
            font-family:Verdana;
            color: transparent;
            -webkit-text-stroke: 2px red;
        }
    </style>
</head>
<body>
<div>helicopter</div>
<p>helicopterjsflsaghlsaghoegskghlas;jfkldjgowg</p>
<h1>yuyuan</h1>

</body>
</html>